import React, { Component } from 'react'
import RouterView from '@/router/index'
import styled from 'styled-components'
import NavFooter from '@/components/cart/navfooter'

const DmallWrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction:column;
`
const HeaderWrapper = styled.header`
  width: 100%;
  height: 45px;
  background: orange;
  text-align:center;
  line-height: 45px;
`

const FooterWrapper = styled.footer`
 width: 100%;
 height: 45px;
 background: #eee;
 text-align:center;
 line-height: 45px;
`

const MainWrapper = styled.main`
  width: 100%;
  flex:1;
  overflow:auto;
`

export default class DmallHomeIndex extends Component {
  render() {
    return (
      <DmallWrapper className="dmall-home-wrapper">
        {/* 头部 */}
        <HeaderWrapper></HeaderWrapper>
        {/* 中间 */}
        <MainWrapper>
          <RouterView routes={this.props.routes}></RouterView>
        </MainWrapper>
        {/* 尾部 */}
        <FooterWrapper>
          <NavFooter></NavFooter> 
        </FooterWrapper>
      </DmallWrapper>
    )
  }
}
